import React from 'react';
import { Layout, Menu, Typography, theme } from 'antd';
import { Link, useLocation } from 'react-router-dom';
import { routes } from '../routes';

const { Header, Sider, Content } = Layout;
const { Title } = Typography;

const MainLayout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const location = useLocation();
  const { token } = theme.useToken();

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Header style={{ 
        background: token.colorBgContainer,
        padding: '0 24px',
        display: 'flex',
        alignItems: 'center',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <Title level={3} style={{ margin: '16px 0', color: token.colorPrimary }}>
          PDF工具箱
        </Title>
      </Header>
      <Layout>
        <Sider
          width={200}
          style={{
            background: token.colorBgContainer,
            boxShadow: '2px 0 8px rgba(0,0,0,0.1)'
          }}
        >
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            style={{ height: '100%', borderRight: 0 }}
            items={routes.map(route => ({
              key: route.path,
              icon: route.icon,
              label: <Link to={route.path}>{route.name}</Link>
            }))}
          />
        </Sider>
        <Layout style={{ padding: '24px' }}>
          <Content
            style={{
              background: token.colorBgContainer,
              padding: 24,
              margin: 0,
              minHeight: 280,
              borderRadius: token.borderRadius,
              boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default MainLayout; 